import {Axis, Chart, Legend, Bar, Tooltip} from 'viser-react'
import * as React from 'react'

const DataSet = require('@antv/data-set')

export default class App extends React.Component {
  render () {
    const {source} = this.props

    const dv = new DataSet.View().source(source || [])
    dv.transform({
      type: 'fold',
      fields: ['进线数', '沟通数'],
      key: 'stat',
      value: 'num',
    })

    const scale = [{
      dataKey: 'time',
      min: 0,
      max: 1,
    }]

    const tooltipOpts = {
      showTitle: false,
    }

    return (
      <Chart forceFit height={309} data={dv.rows} scale={scale}>
        <Tooltip {...tooltipOpts}/>
        <Axis/>
        <Legend/>
        <Bar position="time*num" color="stat" adjust={[{type: 'dodge', marginRatio: 1 / 32}]}/>
      </Chart>
    )
  }
}




